<template>
	<view>
		<view class="" style="height: 1rpx;"></view>
		<view v-if="pinjia_list.length" class="">
			<view class="box_top2" v-for="(item,index) in pinjia_list" :key="index">
				<view class="" style="width: 92%;margin: 0 auto;padding-top: 24rpx;">
					<view class="dispAI">
						<view class="">
							<image :src="item.avatar"
								style="width: 64rpx;height: 64rpx;border-radius: 50%;margin-right: 12rpx;" mode="">
							</image>
						</view>
						<view class="" style="font-size: 28rpx;color: #333;margin-right: 12rpx;">{{item.nickname}}
						</view>
						<view class="">
							<u-rate :count="count" v-model="item.sever_stars" size="14" readonly
								activeColor="#FFA42F"></u-rate>
						</view>
					</view>

					<view class="MT_20" style="font-size: 24rpx;color: #999;">
						{{item.created_at}}
					</view>

					<view class="MT_10" style="font-size: 28rpx;color: #333;">
						{{item.content}}
					</view>


					<view class="MT_30" style="display: flex;">
						<view class="" v-for="(subitem,subindex) in item.images" :key="subindex"
							style="position: relative;">
							<image :src="subitem" mode="aspectFit"
								style="width: 214rpx;height: 214rpx;margin-right: 20rpx;display: flex;"
								@click="handleIMGBIG(item.images,subindex)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view v-else class="">
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text='暂无评价'>
			</u-empty>
		</view>


	</view>
	</view>
</template>

<script>
	import {
		productscomment
	} from "@/api/api.js"
	export default {
		data() {
			return {
				count: 5,
				value: '',
				page1: 1,
				pinjia_list: []
			}
		},
		onLoad(e) {
			this.id = e.id
			this.get_pinjia_list()
		},

		methods: {
			// 获取所有评价
			async get_pinjia_list() {
				let data = {
					page: this.page1,
					page_size: 20,
					products_id: this.id,
					type: 0
				}
				const res = await productscomment(data)
				res.data.comment.data.forEach((item, index) => {
					item.images = item.images.split(",")
				})
				console.log(res.data.comment.data, '获取热销商品');
				this.pinjia_list = [...this.pinjia_list, ...res.data.comment.data]
				if (res.data.comment.data[0]) {
					this.page1++
				} else if (this.page1 > 1)  {
					setTimeout(
						function() {
							uni.$u.toast("没有更多数据了~");
						}, 500)
				}
			},
			handleIMGBIG(img, index) {
				uni.previewImage({
					current: index,
					urls: img //必须是网址路径，否则加载不出来，如：http：或https：
				});
			},
		},
		// 触底的事件
		onReachBottom(e) {
			let that = this
			setTimeout(
				function() {
					that.get_pinjia_list()
				}, 300)
		},

	}
</script>

<style scoped>
	.box_top2 {
		width: 750rpx;
		padding-bottom: 30rpx;
		background: #FFFFFF;
		margin-top: 2rpx;
	}
</style>